<template>
    <el-footer class="footer-container">
        <el-divider />
        <div class="footer-content">
            <div class="footer-links">
                <div v-for="(group, index) in linkGroups" :key="index" class="link-group">
                    <h4>{{ group.title }}</h4>
                    <ul>
                        <li v-for="(item, i) in group.items" :key="i" style="cursor: pointer;">
                            {{ item }}
                            <!-- <a href="#">{{ item }}</a> -->
                        </li>
                    </ul>
                </div>
            </div>

            <div class="footer-contact">
                <!-- <img class="qrcode" src="" alt="二维码" /> -->
                <div class="phone">今生永恒网服务热线<br /><span>17308381872</span></div>
                <el-button type="primary" size="small" plain>在线客服</el-button>
                <div class="wechat-label">今生永恒网微信公众号平台</div>
            </div>
        </div>

        <div class="footer-bottom">
            <div class="zigzag"></div>
            <div class="bottom-text">
                <p>Copyright © 2006 - 2025 All Rights Reserved.</p>
                <p>版权所有 今生永恒网 备案号：渝ICP备2025058791号-1</p>
                <p>互联网违法和不良信息举报</p>
            </div>
        </div>
    </el-footer>
</template>
<script setup lang="ts">
const linkGroups = [
    {
        title: '关于今生永恒网',
        items: ['今生永恒网介绍', '今生永恒资讯', '服务条款', '联系我们']
    },
    {
        title: '网上祭祀',
        items: ['网上纪念馆', '免费建馆', '纪念文章', '纪念相册']
    },
    {
        title: '民俗文化',
        items: ['传统文化', '姓氏文化', '残疾文化', '宗教信仰']
    },
    {
        title: '生命文化',
        items: ['生命教育', '和谐家庭', '生命传奇']
    },
    {
        title: '帮助中心',
        items: ['建馆帮助', '会员帮助', '怎样建纪念馆', '怎样网上祭祀']
    }
]
</script>
<style scoped>
.footer-container {
    height: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    background: #f3f1e9;
    font-size: 14px;
    color: #333;
    margin-top: 20px;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    padding: 30px 20px;
    flex-wrap: wrap;
}

.footer-links {
    display: flex;
    flex: 1;
    gap: 40px;
}

.link-group h4 {
    font-weight: bold;
    margin-bottom: 10px;
}

.link-group ul {
    list-style: none;
    padding: 0;
}

.link-group li {
    line-height: 1.8;
}

.link-group a {
    text-decoration: none;
    color: #333;
}

.footer-contact {
    text-align: center;
    max-width: 200px;
}

.qrcode {
    width: 100px;
    height: 100px;
    margin-bottom: 10px;
}

.phone {
    margin: 10px 0;
    line-height: 1.5;
}

.phone span {
    color: #c55c38;
    font-weight: bold;
    font-size: 16px;
}

.wechat-label {
    margin-top: 5px;
    font-size: 12px;
    color: #888;
}

.footer-bottom {
    background: #544b43;
    color: #fff;
    text-align: center;
    padding: 20px 10px;
    position: relative;
}

.zigzag {
    height: 10px;
    background: repeating-linear-gradient(-45deg, #f3f1e9, #f3f1e9 10px, #544b43 10px, #544b43 20px);
}

.bottom-text p {
    margin: 5px 0;
    font-size: 13px;
}
</style>